<template>
    <div v-cloak style="height: 100vh;background-color: white;display: flex;align-items: center;flex-direction: column">
        <el-button style="margin: 20px" size="small" type="primary" @click="downloadAnalysis">下载分析结果</el-button>
        <div style="font-size: 15px;letter-spacing: 2px;color: blue">多数据文件上传</div>
        <el-upload
                style="margin-top: 20px;"
                class="upload-demo"
                drag
                :action="this.$Api.dataAnalysis.excels"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                list-type="xls/xlsx"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件，且不超过10M</div>
        </el-upload>
        <div style="font-size: 15px;letter-spacing: 2px;color: blue">产品链接</div>
        <el-upload
                style="margin-top: 20px;"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_product_link_data"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>
        <div style="margin-top: 20px;font-size: 15px;letter-spacing: 2px;color: blue">关键词</div>
        <el-upload
                style="margin-top: 20px"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_keyword"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>
        <div style="margin-top: 20px;font-size: 15px;letter-spacing: 2px;color: blue">店铺数据</div>
        <el-upload
                style="margin-top: 20px"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_store_data"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>
        <div style="margin-top: 20px;font-size: 15px;letter-spacing: 2px;color: blue">订单数据</div>
        <el-upload
                style="margin-top: 20px"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_store_order"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>
        <div style="margin-top: 20px;font-size: 15px;letter-spacing: 2px;color: blue">流量来源数据</div>
        <el-upload
                style="margin-top: 20px"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_flow_source_data"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>
        <div style="margin-top: 20px;font-size: 15px;letter-spacing: 2px;color: blue">商品sku</div>
        <el-upload
                style="margin-top: 20px"
                class="upload-demo"
                :action="this.$Api.dataAnalysis.excel"
                :on-success="uploadSuccess"
                :on-error="uploadError"
                :data="import_goodse_data"
                list-type="xls/xlsx"
                multiple>
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip" slot="tip">只能上传xlsx/pxls文件，且不超过10M</div>
        </el-upload>

    </div>
</template>

<script>
    export default {
        name: "DataAnlysis",
        data(){
            return {
                import_product_link_data: {
                    type:"import_product_link_data"
                },
                import_keyword: {
                    type: "import_keyword"
                },
                import_store_data: {
                    type: "import_store_data"
                },
                import_store_order: {
                    type: "import_store_order"
                },
                import_flow_source_data: {
                    type: "import_flow_source_data"
                },
                import_goodse_data: {
                    type: "import_goodse_data"
                }
            }
        },
        methods:{
            uploadSuccess(response, file, fileList){
                if (response.code == this.$ResponseCode.ok) {

                    layer.msg("上传成功！"+file.name)

                }else{
                    alert(response.info.msg)
                }
            },
            uploadError(err, file, fileList){
                console.log(err.status)
                if (err.status == this.$ResponseCode.noLogin) {
                        window.login();
                }else{
                    alert("出错！")
                }

            },
            /**
             * 下载分析结果
             */
            downloadAnalysis(){
                window.open(this.$Api.dataAnalysis.downloadAnalysis.concat("?type=export_result"));
            },

        }, created() {
            this.$http.get(this.$Api.test).then(function (resp) {

            })
        }
    }
</script>

<style scoped>
    [v-cloak] {
        display: none;
    }
</style>
